.search {
  // this is a temporary style to fill the space that will be filled by the tab bar
  position: relative;
  padding-top: 17px;
  min-height:710px;

  .loadingSearch {
    position: absolute;
    z-index: 1;
    top: 0;
  }

  .searchProviders {
    width: $pageWidth + $padLg + $padLg;
    height: 100%;
    padding: 0 $padLg;

    .discoverLogo {
      background-image: url('../../imgs/obVectorIconSmall.svg');
      // adjust the size and position so the borders inside the svg match the other buttons
      height: 48px;
      width: 48px;
      margin-top: 5px;
    }

    .providersHeader {
      width: 134px;
    }

    .providersBar {
      display: flex;
      align-items: stretch;

      .providerWrapper {
        display: flex;
        align-items: stretch;
        position: relative;

        .selectingBox {
          top: calc(100% + 10px);
          width: 420px;
          padding: $padLg;
          transform: translateX(-50%);
          left: calc(50% - 5px); // offset by half the margin on the right side of the parent
        }

        .searchProvider {
          flex-shrink: 0;
          width: auto;

          .providerBtn {
            padding: 0;

            &:focus, &:hover {
              outline: none;
            }

            .providerInner {
              opacity: .35;
            }

            &.showSelectDefault .providerInner {
              opacity: 1;
            }
          }

          &.active {
            border-bottom-width: 1px;
            border-bottom-style: solid;

            .providerBtn .providerInner {
              opacity: 1;
            }
          }
        }
      }

      .addWrapper {
        width: auto;

        .addProvider {
          position: absolute;
          height: $thumb;
          width: $thumb;
        }
      }

      .providerBtn, .addBtn {
        border-width: 1px;
        border-style: solid;
        border-radius: $corner;
      }

      .addBtn {
        i:before {
          font-size: 28px;
        }
      }

      .addBox {
        top: calc(100% + 12px);
        min-width: 360px;
      }
    }
  }

  #pageTabBar.noTips {
    .toolTip,
    .toolTipNoWrap {
      &:hover:before,
      &:hover:after {
        opacity: 0;
        pointer-events: none;
      }
    }
  }

  .searchBar {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 3px;

    .searchLogo {
      position: absolute;
      left: 8px;
      height: 26px;
      width: 26px;

      img {
        height: 26px;
        width: 26px;
      }

      &.loadError {
        // if the logo fails to load, hide it and show the default
        background-image: url(../../imgs/emojis/72X72/1f50d.png);
        background-repeat: no-repeat;
        background-size: 16px 16px;
        background-position: center;

        img {
          display: none;
        }
      }
    }

    .searchInput {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right-width: 0;

      &:focus {
        border-right-width: 1px;
      }

      &.withLogo {
        text-indent: 30px;
      }
    }

    .searchBtn {
      padding: 0 $padLg;
      line-height: 40px;
      font-size: 1.4rem;
      height: auto;
      border-radius: 3px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      flex-shrink: 0;
      flex-grow: 1;
    }
  }

  .suggestions > * {
    flex-shrink: 0;
    padding-bottom: 2px; // prevent descenders from being cut off
  }

  .filterWrapper {
    padding-right: 5px;

    label {
      font-size: $tx5b;
      line-height: 1.3em;
      min-height: 1.3em;
      padding: 0.3em 0px;
    }

    .select2 {
      margin-top: 12px;
    }

    .btnRadio, .checkboxCol {
      label > span .emoji {
        position: relative;
        top: 0.1em;
      }
    }
  }

  .searchResults {

    .listingsGrid {
      min-height: 298px;
    }

    .loadingSearch {
      display: flex;

      .spinner {
        position: absolute;
        top: calc(25% - #{$spinnerLg/2});
      }

      .listingsGrid {
        display: none;
      }
    }

    .noResultsMessage {
      display: none;
    }

    &.noResults {
      .cryptoListViewHeader {
        display: none;
      }

      .noResultsMessage {
        display:block;
      }

      .pageControls,
      .listingGrid {
        display: none;
      }
    }

    &.searchCategory {
      position: relative;
      margin-top: 50px;

      .cryptoListViewHeader {
        padding: 15px 30px;
        font-size: 1.4rem;
      }

      .listingsGrid.listingsGridCryptoListView  .listingCard {
        padding: 6px 30px;
        font-size: 1.6rem;
      }

      &:first-child {
        margin-top: 20px;
      }

      &:last-child .categoryRow {
        display: none;
      }
    }
  }
}
